<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>招生报名</title>
    <!-- css 文件 -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <!-- jQuery 库 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- JavaScript 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
    <!-- modernizr.js 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

</head>
<body>

    <style>
       .newscontent{max-width: 1440px;font-size:0;}
       .newsitem{width:20%;padding:10px;box-sizing: border-box;display: inline-block;vertical-align: top;}
       .newsimg{width:100%;background:#333;}
       .newsnr{background:#fff;padding:.6rem;}
       .newsnr h4{font-size:1rem;font-weight: bold;}
       .newsnrsl{font-size:.6rem;color:#777;margin:1rem 0;}
       .newsfbtime{color:#777;font-size:10px;margin:0;}
       .newspagebg{background:#fff;width:100%;height:100%;padding:1rem;position:relative;height:21rem;}
       .pagetab{position: absolute;bottom:1rem;left:1rem;}
       .pagetab a{border:solid 1px #333;color:#333;padding:10px 8px;display: inline-block;margin-right:15px;font-size:14px;}
       .pagetab a:hover{background:#151765;color:#fff;}
       .newspagetitle h4{font-size:1.2rem;font-weight: bold;border-bottom:solid 2px #333;display: inline;padding-bottom:5px;}
       .newspagetitle  p{margin-top:10px;font-size:.8rem;}
       .newscontents{background:#fff;height:21rem;}
       .baomingtitle{padding:3rem;font-size:1.6rem;text-align: center;font-weight: bold;position:relative;}
       .baomingtitle::after{content: " ";position:absolute;width:60px;height:3px;background:#333;left:50%;top:50%;margin-top:1.2rem;margin-left:-30px;}
        .baominginfo{background:#151765;padding:1rem 0 4rem;color:#fff;}}
        .baominginfo .row{max-width:670px;}
       .baominginfo .tab-title>a{padding:.3rem 1.8rem;border-radius: 1.2rem;margin:0 20px 0;background:none;color:#fff;}
       .baominginfo .tab-title{float:none;display: inline-block;}
       .baominginfo .tabs{text-align: center;}
       .baominginfo .content{padding:5rem 6rem 0;}
       .wzicfont{text-align: center;}
       .wzicfont span{margin:0 20px;}
       .addresstext{text-align:center;margin:15px 0;font-size:14px;}
       .baominginfo dl{margin:2rem auto 15px;max-width:28rem;}
       .baominginfo dd{padding-left:25px;font-size:14px;margin:0;}
       .ruxueliucheng{background:#fff;font-size: 0;}
       .liuchengitem{width:33.3%;display: inline-block;text-align: center;padding:4.5rem 0 5rem;}
       .liuchengitem span{margin-bottom:4rem;display: block;border-radius: 50%;width:3.4rem;height:3.4rem;display: inline-block;}
       .liuchengitem.active{background:#141765;color:#fff;}
       .liuchengitem.active h4{color:#fff;}
       .liuchengitem.active span{background:#fff;padding:5px;}
       .baomingbz{padding:5rem 0 2rem;}
       .buzhouitem{width:14.2%;display: inline-block;text-align: center;color:#808080;}
       .buzhouitem h4{font-weight: bold;font-size:32px;color:#808080;}
       .buzhouitem.active{color:#141765;}
       .buzhouitem.active h4{color:#141765;}
       .yinanjieda{background:#fff;padding:5rem 0;}
       .yinanjieda ul{max-width: 660px;margin: 0 auto;}
       .yinanjieda a{background:none !important;position: relative;padding:.5rem !important;}
       .yinanjieda a::before{content:"+";position:absolute;right:0;top:50%;font-size:22px;line-height: 0;}
       .yinanjieda .content{font-size:13px;border-bottom:dashed 1px #777;margin-right:5rem;}
       .yinanjieda .active a::before{content: "-";}
       .gzhinfo{padding:4rem 0;display: block;margin:0 auto;text-align: center;}

        .baomingfromview{width:477px;margin:0 auto;color:#fff;}
        .baomingfromview label{width:225px;display: inline-block;margin-top:14px;}
        .baomingfromview label:nth-child(odd){margin-right:20px;}
        input[type='text']{border-radius: 4px;border-color:#f2f2f2;}
        .baomingfromview .labeltext{margin:0;color:#fff;font-size:14px;}
        .baomingfromview textarea{border-radius: 4px;border-color:#f2f2f2;height:120px;margin-bottom:5px;}
        .formtjbtn{margin-top:14px;}
        .formtjbtn button{width:156px;height:36px;line-height:36px;border-radius: 18px;color:#151765;background:#fff;padding:0;margin-bottom:11px;}
        .formtjbtn button:active, .formtjbtn button:focus{outline: none;}
        .formtjbtn p{font-size:12px;color:#fff;line-height:15px;}
    </style>
    <div class="nrheadtablink">
        <a href="" class="active">招生简章</a>
        <a href="">报名方式</a>
        <a href="">入学教程</a>
        <a href="">疑问解答</a>
    </div>
    <div class="row newscontent">
        <div class="newsitem">
            <div class="newspagebg">
                <div class="newspagetitle">
                    <h4>校园时光</h4>
                    <p>XYSG</p>
                </div>
                <div class="pagetab">
                    <a href=""><<<</a><a href="">>>></a>
                </div>
            </div>
        </div>
        <a href="" class="newsitem">
            <div class="newscontents">
                <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                <div class="newsnr">
                    <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                    <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                    <p class="newsfbtime">2019-01-01</p>
                </div>  
            </div>          
        </a>
        <a href="" class="newsitem">
                <div class="newscontents">
                    <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                    <div class="newsnr">
                        <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                        <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                        <p class="newsfbtime">2019-01-01</p>
                    </div>  
                </div>          
            </a>
            <a href="" class="newsitem">
                <div class="newscontents">
                    <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                    <div class="newsnr">
                        <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                        <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                        <p class="newsfbtime">2019-01-01</p>
                    </div>  
                </div>          
            </a>
            <a href="" class="newsitem">
            <div class="newscontents">
                <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                <div class="newsnr">
                    <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                    <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                    <p class="newsfbtime">2019-01-01</p>
                </div>  
            </div>          
        </a>
        <a href="" class="newsitem">
            <div class="newscontents">
                <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                <div class="newsnr">
                    <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                    <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                    <p class="newsfbtime">2019-01-01</p>
                </div>  
            </div>          
        </a>
        <a href="" class="newsitem">
            <div class="newscontents">
                <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                <div class="newsnr">
                    <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                    <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                    <p class="newsfbtime">2019-01-01</p>
                </div>  
            </div>          
        </a>
    </div>
    <h3 class="baomingtitle">报名方式</h3>
    <div class="baominginfo">
        <div class="row">
            <ul class="tabs" data-tab>
                <li class="tab-title active"><a href="#xianchangbaoming">现场报名</a></li>
                <li class="tab-title"><a href="#wangshangbaoming">网上报名</a></li>
                <li class="tab-title"><a href="#gongzhonghaobaoming">公众号报名</a></li>
            </ul>
            <div class="tabs-content">
                <div class="content active" id="xianchangbaoming">
                    <div class="wzicfont">
                        <span><img src="./img/qiche.png" alt=""></span>
                        <span><img src="./img/feiji.png" alt=""></span>
                        <span><img src="./img/huoche.png" alt=""></span>
                    </div>
                    <p class="addresstext">校园地址：杭州市萧山区楼塔镇言志美术（萧山校区）<br>联系电话：0571-5810 5578</p>
                    <dl>
                        <dt>火车站</dt>
                        <dd>线路一：1路公交在木舟大道1路公交在木舟大道1路公交在木舟大道</dd>
                        <dd>线路一：1路公交在木舟大道1路公交在木舟大道1路公交在木舟大道</dd>
                        <dd>线路一：1路公交在木舟大道1路公交在木舟大道1路公交在木舟大道</dd>
                    </dl>
                    <dl>
                        <dt>火车站</dt>
                        <dd>线路一：1路公交在木舟大道1路公交在木舟大道1路公交在木舟大道</dd>
                        <dd>线路一：1路公交在木舟大道1路公交在木舟大道1路公交在木舟大道</dd>
                        <dd>线路一：1路公交在木舟大道1路公交在木舟大道1路公交在木舟大道</dd>
                    </dl>
                    <dl>
                        <dt>火车站</dt>
                        <dd>线路一：1路公交在木舟大道1路公交在木舟大道1路公交在木舟大道</dd>
                        <dd>线路一：1路公交在木舟大道1路公交在木舟大道1路公交在木舟大道</dd>
                        <dd>线路一：1路公交在木舟大道1路公交在木舟大道1路公交在木舟大道</dd>
                    </dl>
                </div>
                <div class="content" id="wangshangbaoming">
                    <div class="baomingfromview">
                        <form action="">
                            <label for="name">
                                <span class="labeltext">姓名（必填）</span>
                                <input type="text" id="name">
                            </label>
                            <label for="name">
                                <span class="labeltext">电话（必填）</span>
                                <input type="text" id="name">
                            </label>
                            <label for="name">
                                <span class="labeltext">性别</span>
                                <input type="text" id="name">
                            </label>
                            <label for="name">
                                <span class="labeltext">年纪</span>
                                <input type="text" id="name">
                            </label>
                            <label for="name">
                                <span class="labeltext">微信/QQ</span>
                                <input type="text" id="name">
                            </label>
                            <label for="name">
                                <span class="labeltext">宿舍类型</span>
                                <input type="text" id="name">
                            </label>
                            <label for="name">
                                    <span class="labeltext">入学时间</span>
                                    <input type="text" id="name">
                                </label>
                                <label for="name">
                                    <span class="labeltext">地址</span>
                                    <input type="text" id="name">
                                </label>
                            <p class="labeltext">留言</p>
                            <textarea rows="4"></textarea>
                            <p class="labeltext">校园地址：杭州市萧山区楼塔镇言志美术（萧山校区）</p>
                            <p class="labeltext">联系电话：0571-5810 5578</p>
                            <div class="text-center formtjbtn">
                                <button>预约报名</button>
                                <p>请留下您的联系方式<br>招生办老师将于24小时内与您沟通</p>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="content" id="gongzhonghaobaoming">
                    <span class="gzhinfo"><img src="./img/gzh.png" alt=""></span>
                </div>
            </div>
        </div>
    </div>
    <div>
        <h3 class="baomingtitle">入学流程</h3>
    </div>
    <div class="ruxueliucheng">
        <div class="liuchengitem">
            <span><img src="./img/zixun.png" alt=""></span>
            <h4>教室安排</h4>
            <p>课程顾问会为学生及家长线上或线下第一时间答疑</p>
        </div>
        <div class="liuchengitem active">
            <span><img src="./img/canguan.png" alt=""></span>
            <h4>参观校园</h4>
            <p>学校老师亲自安排带领参观和详细了解学校及周边</p>
        </div>
        <div class="liuchengitem">
            <span><img src="./img/boshi.png" alt=""></span>
            <h4>班级安排</h4>
            <p>针对性建议班型，让学生接受最适合自己的教学</p>
        </div>
        <div class="baomingbz">
            <div class="buzhouitem">
                <h4>1</h4>
                <p>咨询了解</p>
            </div>
            <div class="buzhouitem active">
                <h4>2</h4>
                <p>参观校园</p>
            </div>
            <div class="buzhouitem">
                <h4>3</h4>
                <p>班级安排</p>
            </div>
            <div class="buzhouitem">
                <h4>4</h4>
                <p>缴纳费用</p>
            </div>
            <div class="buzhouitem">
                <h4>5</h4>
                <p>填写档案</p>
            </div>
            <div class="buzhouitem">
                <h4>6</h4>
                <p>领取物品</p>
            </div>
            <div class="buzhouitem">
                <h4>7</h4>
                <p>住宿安排</p>
            </div>
        </div>
    </div>
    <h3 class="baomingtitle">疑难解答</h3>
    <div class="yinanjieda">
        <ul class="accordion" data-accordion>
            <li class="accordion-navigation">
                <a href="#demo">1、你们萧山校区的地址在哪里？</a>
                <div id="demo" class="content">杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号
                        杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号
                </div>
            </li>
            <li class="accordion-navigation">
                <a href="#demo1">2、你们萧山校区的地址在哪里？</a>
                <div id="demo1" class="content">杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号
                        杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号
                </div>
            </li>
            <li class="accordion-navigation">
                <a href="#demo2">3、你们萧山校区的地址在哪里？</a>
                <div id="demo2" class="content">杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号
                        杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号
                </div>
            </li>
            <li class="accordion-navigation">
                <a href="#demo3">4、你们萧山校区的地址在哪里？</a>
                <div id="demo3" class="content">杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号
                        杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号杭州市萧山区木舟大道128号
                </div>
            </li>
        </ul>
    </div>
</body>
<script src="./js/commond.js"></script>
</html>